{% extends 'bootstrap-modal-layout.html.twig' %}
{% block title %}{{ 'user.login.content_title'|trans }} {{ setting('site.name') }}{% endblock %}
{% set modal_class = 'login-modal js-login-modal' %}
{% do script(['libs/jquery-validation.js','app/js/auth/login-sms-ajax/index.js']) %}

{% set ai_face_enabled = (setting('feature.face_enabled')|default(0) and setting('face.login.enabled')|default(0) and setting('face.login.pc_enabled')|default(0)) %}
{% block body %}
  <form id="login-sms-form" class="form-vertical form-vertical-small js-login-form" method="post" action="{{ path('login_sms') }}">

    <div class="form-group">
      <label class="control-label required" for="mobile">{{ 'user.settings.security.mobile'|trans }}</label>
      <div class="controls">
        <input type="text" id="mobile" name="mobile" class="form-control" data-role="mobile">
      </div>
    </div>

    <div class="form-group cd-mb32 js-drag-jigsaw">
      {% include 'common/drag.html.twig' with { showLabel: 0 } %}
    </div>

    <div class="form-group">
      <label class="control-label required" for="sms-code">{{ 'user.settings.security.sms_code'|trans }}</label>
      <div class="controls row">
        <div class="col-xs-8">
          <input type="text" class="form-control" id="sms-code" name="sms_code"
                 data-explain="{{ 'user.settings.security.sms_code_tips'|trans }}" required="required">
        </div>
        <div class="col-xs-4">
          <a class="btn btn-default btn-sm js-sms-send" href="javascript:;"
             data-sms-url="{{ path('edu_cloud_sms_send') }}" data-sms-type="sms_forget_password">
            <span id="js-time-left"></span>
            <span id="js-fetch-btn-text">{{ 'user.settings.security.get_sms_code_btn'|trans }}</span>
          </a>
        </div>
        <div class="col-xs-12 help-block"></div>
      </div>
    </div>
    <div class="form-group mbl">
      <div class="controls">
        <a id="pwd-login" class="link-primary pull-right"><i class="glyphicon glyphicon-retweet"></i> {{ 'site.login.change_to_pwd'|trans }}</a>
      </div>
    </div>
    <br/>

    <div class="form-group mbl">
      <button type="button" class="btn btn-primary btn-lg btn-block js-btn-login">{{ 'user.login.submit_button'|trans }}</button>
    </div>

    <input type="hidden" name="_target_path" value="{{ _target_path }}">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">
    <input type="hidden" name="sms_token" value="">

  </form>

  {% if ai_face_enabled %}
    {% set type = 'modal' %}
    {% include 'login/sts-logins-block.htm.twig'  with { type: type, goto: _target_path } %}
  {% endif %}

{% endblock %}

{% block footer %}
  <div class="text-left text-sm">
    <a class="link-primary" href="{{ path('password_reset') }}">{{'user.login.find_password'|trans}}</a>
    <span class="color-gray mhs">|</span>
    <span class="color-gray">{{'user.login.ask_register'|trans}}</span>
    <a class="link-primary" href="{{ path('register', {goto:_target_path}) }}">{{'user.login.go_register'|trans}}</a>
  </div>

  {% if setting('login_bind.enabled') or ai_face_enabled %}
    <div class="social-login">
    <span>
      {% if ai_face_enabled %}
        <a class="sts-login-link js-sts-login-link" href="javascript:;">
          <img src="{{ asset('static-dist/app/img/face.png') }}"
               srcset="{{ asset('static-dist/app/img/face.png') }} 1x" alt="{{'user.login.sts_discovery'|trans}}"/>
        </a>
      {% endif %}
      {{ render(controller('AppBundle:Login:oauth2LoginsBlock', {targetPath:_target_path})) }}
    </span>
      <div class="line"></div>
    </div>
  {% endif %}


{% endblock %}
